<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
    <script src="../application/jquery.js"></script>
</head>
<body>
    <div class="app">
        <p>msg:{{msg}}</p>
        <p>result:{{result}}</p>
        <p>arr:{{arr}}</p>
        <input type="text" v-model="msg">
        <input type="button" value="百度一下" @click="loadBaidu()">
        <input type="text" v-model="getBaidu" > 
        <hr>
        <p>user.name:{{user.name}}</p>
        <input type="text" v-model="user.name">
        <input type="text" v-model="user.addr.city">
        <input type="button" value="重置user对象" @click="resetUser()">
        <p>arr1:{{arr1}}</p>
        <input type="text" v-model="arr1[1]">
    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"袁天罡",
            result:[],
            arr:[],
            user:{
                name:"林志颖",
                age:46,
                addr:{
                    prov:"台湾",
                    city:"台北"
                }
            },
            arr1:[1,2,3,4]
        },
        watch:{
            msg:function(nv,ov){
                this.loadBaidu();
                this.arr.push(ov);
                console.log(nv,ov);
            },
            "user.name"(){
                console.log("user里面的name属性发生了改变引起的监视");
            },
            "user.addr"(){
                console.log("改变user里面的addr");
            },
            user:{
                handler(nv,ov){
                    console.log("user里面的属性值被改变",nv,ov);
                },
                deep:true
            },
            arr1:{
                handler(nv,ov){
                    console.log("arr里面的值被改变",nv,ov);
                }
            }
        },
        computed:{
            // getBaidu(){
            //     this.loadBaidu();
            // }
            getBaidu:{
                get(){
                    return this.msg;
                },
                set(nv){
                    this.msg=nv;
                }
            }
        },
        methods:{
            loadBaidu(){
                $.ajax({
                    url:"https://www.baidu.com/su",
                    data:{
                        wd:this.msg
                    },
                    dataType:"jsonp",
                    jsonp:"cb",
                    success:({s})=>{
                        // console.log(s);
                        this.result=s;
                    }
                })
            },
            resetUser(){
                this.user={
                    name:"袁天罡",
                    age:300
                }
            }
        }
    })
</script>
</html>